<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload"/>
    <el-dialog
        v-model="checkDialog" title="审核状态" width="450px" @close="form={},visible=false">
      <el-form label-width="80px">
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option label="通过" :value="1"/>
            <el-option label="驳回" :value="2"/>
            <el-option label="待审核" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入审核说明"/>
        </el-form-item>

        <el-form-item>
          <el-button @click="checkDialog=false">取消</el-button>
          <el-button type="primary" @click="handlerSubmitCheck">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer v-model="visible" direction="rtl" @close="form={}">
      <el-descriptions title="认证资料" :column="1" border>
        <el-descriptions-item width="80px">
          <template #label>
            <div class="cell-item">
              会员手机号
            </div>
          </template>
          <transition v-if="form.user">{{ form.user.mobile }}</transition>
        </el-descriptions-item>
        <el-descriptions-item width="80px">
          <template #label>
            <div class="cell-item">
              认证姓名
            </div>
          </template>
          <transition>{{ form.name }}</transition>
        </el-descriptions-item>
        <el-descriptions-item width="80px">
          <template #label>
            <div class="cell-item">
              身份证号
            </div>
          </template>
          <transition>{{ form.idCard }}</transition>
        </el-descriptions-item>
        <el-descriptions-item width="80px">
          <template #label>
            <div class="cell-item">
              身份证图片
            </div>
          </template>
          <el-row :gutter="10">
            <el-col :span="12" v-for="item in form.images" :key="item">
              <el-image
                  style="width: 100%; height: 100%"
                  :src="item"
                  :preview-src-list="form.images"
                  :initial-index="4"
                  fit="cover"
              />
            </el-col>
          </el-row>
        </el-descriptions-item>
        <el-descriptions-item width="80px">
          <template #label>
            <div class="cell-item">
              操作
            </div>
          </template>
          <transition>
            <el-button type="primary" @click="checkDialog=true">审核</el-button>
          </transition>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '手机号',
          placeholder: '请输入手机号查询',
          key: 'mobile'
        },
        {
          type: 'text',
          label: '姓名',
          placeholder: '请输入姓名查询',
          key: 'name'
        },
        {
          type: 'text',
          label: '身份证号',
          placeholder: '请输入身份证号查询',
          key: 'idCard'
        },
        {
          type: 'select',
          label: '状态',
          placeholder: '请选择状态查询',
          key: 'status',
          styles: {width: '150px'},
          options: [
            {label: '全部', value: ''},
            {label: '待审核', value: '0'},
            {label: '已审核', value: '1'},
            {label: '驳回', value: '2'},
          ]
        }, {
          type: 'date-picker',
          label: '提交时间',
          placeholder: '请选择时间',
          key: 'time'
        }
      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '80px'
        },
        {
          label: '会员手机号',
          prop: 'mobile',
          width: '180px',
          type: 'render',
          render: (data) => {
            if (!data.user) return ''
            return data.user.mobile;
          }
        }, {
          label: '姓名',
          prop: 'name',
          width: '180px'
        }, {
          label: '身份证号',
          prop: 'idCard',
          width: '220px'
        }, {
          label: '状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            if (data.status == 0) return `<span class="el-tag el-tag--dark el-tag--warning mx-1 is-round"><span class="el-tag__content">待审核</span></span>`
            if (data.status == 1) return `<span class="el-tag el-tag--dark mx-1 is-round"><span class="el-tag__content">正常</span></span>`
            if (data.status == 2) return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">驳回</span> </span>`
          },
        }, {
          label: '申请时间',
          prop: 'created',
          type: 'date',
          width: '180px'
        }, {
          label: '操作',
          type: 'buttons',
          width: '220px',
          buttons: [
            {
              label: '查询',
              type: 'primary',
              styles: {},
              icon: 'Search',
              callback: (data) => {
                this.form = JSON.parse(JSON.stringify(data));
                this.visible = true
              }
            },
            {
              label: '审核',
              type: 'success',
              icon: 'Check',
              callback: (data) => {
                this.form = JSON.parse(JSON.stringify(data));
                this.checkDialog = true
              }
            },
            {
              label: '删除',
              type: 'danger',
              styles: {},
              icon: 'Delete',
              callback: (data) => {
                this.$api.apiDelete('/api/manager/user-verified/', data.id).then(() => {
                  this.onload(this.data)
                })
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
      form: {},
      checkDialog: false,
      visible: false
    }
  },

  methods: {
    onload(data) {
      this.data.page = data.page;
      this.data.size = data.size;
      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manager/user-verified/', data).then(res => {
        this.data.total = res.total
        this.data.list = res.data;
      })
    },
    handlerSubmitCheck() {
      this.$api.post('/api/manager/user-verified/check', {}, {
        id: this.form.id,
        status: this.form.status,
        remark: this.form.remark
      }).then(() => {
        this.checkDialog = false;
        this.onload(this.data)
      })
    }
  }
}
</script>